<template>
	<view class="content">
		<view class="can-buy">
			<view class="title">
				已上架会员卡
			</view>
			<swiper  v-if="!isshow" class="card-swiper"
				 :autoplay="false" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
				 indicator-active-color="#0081ff">
					<swiper-item v-for="(item,index) in swiperList" :key="index"  style="left:28rpx;padding:0;">
						<view class="swiper-item" style="padding-right:24rpx">
							<view class="card card1">
								<view class="top">
									<view class="text">
										{{item.type}}
									</view>
									<image src="../../../static/images/vip1.png" mode="aspectFill"></image>
								</view>
								<view class="middle">
									{{item.name}}<text>/{{item.classHour}}节</text>
								</view>
								<view class="bottom">
									<view class="text">
										{{shopName}}
									</view>
									<view class="buy" @tap="toCardInfo(item.id,1)">
										下架
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
			</swiper>
			<view class="no-content" v-if="isshow">
				<image src="../../../static/images/no_order.png" mode="" class="no-img"></image>
				<view class="no-text">亲，暂无会员卡哦</view>
			</view>
		</view>
		<view class="can-buy card-pad">
			<view class="title">
				已下架会员卡
			</view>
			<swiper v-if="!isshow1" class="card-swiper" 
				 :autoplay="false" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
				 indicator-active-color="#0081ff">
					<swiper-item v-for="(item,index) in swiperList1" :key="index"  style="left:28rpx;padding: 0;">
						<view class="swiper-item" style="padding-right:24rpx">
							<view class="card card1">
								<view class="top">
									<view class="text">
										{{shopName}}
									</view>
									<view class="text2">
										{{item.type}}
									</view>
								</view>
								<view class="middle">
									{{item.name}}<text>/{{item.classHour}}节</text>
								</view>
								<view class="bottom justify-end">
									<view class="button1" @tap="toCardInfo(item.id,0)">
										上架
									</view>
									<view class="button2"  @tap="toPage('add_card?id=1&item='+JSON.stringify(item))">
										修改
									</view>
									<view class="button3" @tap="toCardInfo1(item.id)">
										删除
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					
			</swiper>
			
			<view class="no-content" v-if="isshow1">
				<image src="../../../static/images/no_order.png" mode="" class="no-img"></image>
				<view class="no-text">亲，暂无会员卡哦</view>
			</view>
		</view>
		<view class="footer align-center _flex_row justify-center" @tap="toPage('add_card?id=-1')">
			<text class="lg text-gray cuIcon-roundadd"></text>
			<view class="text">添加会员卡</view>
		</view>
	</view>
</template>

<script>
	import {findManageCard,vipdelete,shelvesManagement} from '@/api/index.js';
	export default {
		data() {
			return {
				cardCur: 0,
				swiperList: [],
				swiperList1: [],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				shopName: '',
				isshow: true,
				isshow1: true
			};
		},
		onLoad() {
			this.TowerSwiper('swiperList');
			// 初始化towerSwiper 传已有的数组名即可
			
		},
		onShow() {
			this.QueryVIP()//查询管理端会员卡
			this.Inquiryshop()//查询店铺信息
		},
		methods: {
			//查询管理端会员卡
			QueryVIP() {
				findManageCard({}).then(res=>{
					console.log(res)
					if(res.shelves.length==0) {
						this.isshow = true
					}else {
						this.isshow = false
						this.swiperList = res.shelves
					}
					if(res.takeOff.length==0) {
						this.isshow1 = true
					}else {
						this.isshow1 = false
						this.swiperList1 = res.takeOff
					}
				})
			},
			//查询店铺信息
			Inquiryshop() {
				this.shopName = uni.getStorageSync('shopnames')
			},
				
			//页面跳转
			toPage(page){
				uni.redirectTo({
					url:page
				});
			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
			toCardInfo(id,i){//下架
				console.log(id,i)
				this.Upanddownmodification(id,i)
			},
			//删除会员卡
			toCardInfo1(id){
				console.log(id)
				let data={
					id: id
				}
				vipdelete(data).then(res=>{
					this.$api.msg('删除成功');
					setTimeout(function(){
						uni.redirectTo({
							url: 'card'
						})
					},500)

				})
			},
			//会员卡上下架修改
			Upanddownmodification(id,shelves){
				console.log(id,shelves)
				let data = {
					id: id,
					shelves: shelves
				}
				shelvesManagement(data).then(res=>{
					if(shelves==0){
						this.$api.msg('上架成功');
					}else {
						this.$api.msg('下架成功');
					}
					setTimeout(function(){
						uni.redirectTo({
							url: 'card'
						})
					},500)

				})
			}
		}
	}
</script>

<style lang="scss">
	.card-swiper .swiper-item{
		-webkit-transform:scale(1)!important;
		transform:scale(1)!important;
		left:28rpx!important;
		/* border:1px solid red; */
		padding:0;
		width: 600rpx!important;
		height:380rpx!important;
		border-radius: 26rpx;
	}
	.card-swiper uni-swiper-item{
		left:28rpx!important;
		/* border:1px solid red; */
		padding:0;
	}
/* 	.card{
		width:100%;
		height: 380rpx;
		background: url(../../static/images/vip2.png);
		background-size: cover;
		margin-right: 28rpx;
		border-radius: 26rpx;
	} */
	.card1{
		/* border:1px solid red; */
		-webkit-transform:scale(1)!important;
		transform:scale(1)!important;
		/* left:28rpx!important; */
		left:-60rpx!important;
		/* border:1px solid red; */
		padding:0;
		width:100%;
		height: 380rpx;
		padding:0;
		background: url(../../../static/images/vip2.png);
		background-size: cover;
		margin-right: 28rpx;
		border-radius: 26rpx;
	}
	.card2{
		/* border:1px solid red; */
		-webkit-transform:scale(1)!important;
		transform:scale(1)!important;
		/* left:28rpx!important; */
		left:-60rpx!important;
		/* border:1px solid red; */
		padding:0;
		width:100%;
		height: 380rpx;
		background: url(../../../static/images/vip.png);
		background-size: cover;
		margin-right: 28rpx;
		border-radius: 26rpx;
	}
	.top image{
		width:82rpx;
		height:40rpx;
		margin:32rpx;
	}
	.top{
		color: #B59C78;
		font-size: 28rpx;
		display: flex;
		flex-direction: row;
	}
	.top .text{
		flex: 1;
		padding:32rpx 46rpx 32rpx 46rpx;
	}
	.top .text2{
		color: #B59C78;
		padding:32rpx 46rpx 32rpx 46rpx;
	}
	.middle{
		text-align: center;
		font-size: 60rpx;
		color: #B59C78;
	}
	.middle text{
		font-size: 40rpx;
	}
	
	.bottom{
		display: flex;
		flex-direction: row;
	}
	.bottom .text{
		color: #776852;
		font-size: 28rpx;
		margin:88rpx 0 50rpx 50rpx;
		flex: 1;
	}
	.bottom .buy{
		color: #E1CEAD;
		font-size: 28rpx;
		margin:66rpx 32rpx 36rpx 0rpx;
		background: #635443;
		width:176rpx;
		height:76rpx;
		border-radius: 400rpx;
		text-align: center;
		line-height: 76rpx;
	}
	.button1{
		color: #E1CEAD;
		font-size: 28rpx;
		margin:66rpx 32rpx 36rpx 0rpx;
		background: #0B0404;
		width:120rpx;
		height:76rpx;
		border-radius: 400rpx;
		text-align: center;
		line-height: 76rpx;
	}
	.button2{
		color: #E1CEAD;
		font-size: 28rpx;
		margin:66rpx 32rpx 36rpx 0rpx;
		background: #AE874B;
		width:120rpx;
		height:76rpx;
		border-radius: 400rpx;
		text-align: center;
		line-height: 76rpx;
	}
	.button3{
		color: #E1CEAD;
		font-size: 28rpx;
		margin:66rpx 32rpx 36rpx 0rpx;
		background: #E60A0A;
		width:120rpx;
		height:76rpx;
		border-radius: 400rpx;
		text-align: center;
		line-height: 76rpx;
	}
	.card-pad{
		padding-bottom: 100rpx;
	}
	.can-buy{
		background: #fff;
	}
	.can-buy .title{
		color: #424242;
		font-size: 28rpx;
		font-weight: 700;
		padding:24rpx 0 24rpx 36rpx;
		/* margin-top:16rpx; */
	}
	.text1{
		color: #DAB273;
		font-size: 24rpx;
		margin:116rpx 0rpx 50rpx 50rpx;
		flex: 1;
	}
	.time{
		color: #DAB273;
		font-size: 24rpx;
		margin:116rpx 50rpx 50rpx 0;
		
	}
	.footer{
		background: url(../../../static/images/btn1.png);
		background-size: 100% 100%;
		color: #fff;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left:0;
		width:100%;
	}
	.cuIcon-roundadd{
		color: #fff;
		margin-right: 6rpx;
		font-size: 40rpx;
	}
	.text1 {
		text-align: center;
	}
	.no-content {
		text-align: center;
		padding-bottom: 50rpx;
		.no-img {
			width: 300rpx;
			height: 300rpx;
		}
		.no-text{
			margin-top:-30rpx;
			color: #999;
		}
	}
</style>
